<!--  -->
<template>
  <div id="TableView">
    <div class="TableView-btn">
      <button class="btn1"
              @click="practice_all">练习全部</button>
      <button class="btn2"
              @click="practice_active">练习选中</button>
      <button class="btn3"
              @click="del_active">删除选中</button>
      <button class="btn4"
              @click="del_all">删除全部</button>
    </div>
    <el-table :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              height="str"
              @selection-change="handleSelectionChange"
              @cell-dblclick='dblclickCell'>
      <el-table-column type="selection"
                       width="55">
      </el-table-column>
      <el-table-column label="题目"
                       show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.title }}</template>
      </el-table-column>
      <el-table-column prop="paper"
                       label="所属试卷"
                       width="150"
                       align='center'
                       header-align='center'
                       show-overflow-tooltip>
      </el-table-column>
      <!-- prop="type" -->
      <el-table-column label="题型"
                       width="100"
                       align='center'
                       header-align='center'
                       show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.type ==='one'">单选题</span>
          <span v-else-if="scope.row.type ==='question'">多选题</span>
          <span v-else-if="scope.row.type ==='brief'">简答题</span>
          <span v-else-if="scope.row.type ==='judge'">判断题</span>
          <span v-else-if="scope.row.type ==='pack'">填空题</span>
        </template>
        <!-- <template slot-scope="scope"
                  v-else-if="scope.row.type =='question'">多选题</template>
        <template slot-scope="scope"
                  v-else-if="scope.row.type =='brief'">简答题</template>
        <template slot-scope="scope"
                  v-else-if="scope.row.type =='judge'">判断题</template>
        <template slot-scope="scope"
                  v-else-if="scope.row.type =='pack'">填空题</template> -->
      </el-table-column>
      <!-- <el-table-column prop="note" -->
      <el-table-column label="笔记"
                       width="210"
                       align='center'
                       header-align='center'
                       show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.note }}</template>
      </el-table-column>
      <el-table-column prop="create_time"
                       label="答题日期"
                       width="210"
                       align='center'
                       header-align='center'
                       show-overflow-tooltip>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  inject: ['reload'],
  name: 'TableView',
  props: ['tableData', 'viewIndex'],
  data () {
    return {
      activeData: [],
      // 页面状态
      viewStatus: false
    }
  },

  components: {},

  computed: {},

  mounted () {
    this.$store.state.errData = []
  },

  methods: {
    // 表格方法
    handleSelectionChange (val) {
      console.log(val)
      this.activeData = val
    },
    // 练习全部
    practice_all () {
      // console.log('练习全部')
      // this.viewStatus = true
      if (this.tableData.length !== 0) {
        this.$emit('listenViewStatus', true)
      }
    },
    // 练习选中
    practice_active () {
      if (this.activeData.length !== 0) {
        // console.log('练习选中')
        this.$store.state.errData = this.activeData
        // this.viewStatus = true
        this.$emit('listenViewStatus', true)
        console.log(this.$store.state.errData)
      } else {
        this.$message({
          message: '请选择后进行此操作',
          type: 'warning'
        })
      }
    },
    // 删除全部
    del_all () {
      this.$confirm('此操作将删除该全部错题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.tableData.length !== 0) {
          if (this.viewIndex === 1) {
            let errArr = []
            for (let item of this.tableData) {
              errArr.push(item.wid)
            }
            this.$http.delWrong({
              id: errArr.join(','),
              phone: localStorage.getItem('mobile')
            }).then((res) => {
              // console.log(res)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.reload()
              // this.$router.go(0)
            }).catch((err) => {
              console.log(err)
            })
          } else if (this.viewIndex === 2) {
            let errArr = []
            for (let item of this.tableData) {
              errArr.push(item.id)
            }
            this.$http.delCollect({
              phone: localStorage.getItem('mobile'),
              id: errArr.join(',')
            }).then((res) => {
              // console.log(res)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.reload()
            }).catch((err) => {
              console.log(err)
            })
          }
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 删除选中
    del_active () {
      if (this.activeData.length !== 0) {
        console.log('删除选中')
        if (this.viewIndex === 1) {
          let errArr = []
          for (let item of this.activeData) {
            errArr.push(item.wid)
          }
          this.$http.delWrong({
            phone: localStorage.getItem('mobile'),
            id: errArr.join(',')
          }).then((res) => {
            // console.log(res)
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            // this.$router.go(0)
            this.reload()
          }).catch((err) => {
            console.log(err)
          })
        } else if (this.viewIndex === 2) {
          let errArr = []
          console.log('111', this.tableData)
          for (let item of this.activeData) {
            errArr.push(item.id)
          }
          this.$http.delCollect({
            phone: localStorage.getItem('mobile'),
            id: errArr.join(',')
          }).then((res) => {
            // console.log(res)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.reload()
          }).catch((err) => {
            console.log(err)
          })
        }
      } else {
        this.$message({
          message: '请选择后进行此操作',
          type: 'warning'
        })
      }
    },
    // 双击某道题时
    dblclickCell (row) {
      console.log('双击l')
      console.log(row)
      this.$store.state.errData = [row]
      // this.viewStatus = true
      this.$emit('listenViewStatus', true)
    }
  }
}

</script>
<style lang='less'>
#TableView {
  height: 100%;
  .TableView-btn {
    padding: 30px 0;
    text-align: left;
    button {
      border: none;
      padding: 8px 10px;
      color: white;
      margin-right: 20px;
    }
    .btn1 {
      background: url("../assets/img/hand_btn.png");
      background-size: 100% 100%;
    }
    .btn2 {
      background: url("../assets/img/practice.png");
      background-size: 100% 100%;
    }
    .btn3 {
      background: url("../assets/img/history.png");
      background-size: 100% 100%;
    }
    .btn4 {
      background: url("../assets/img/err_btn.png");
      background-size: 100% 100%;
    }
  }
  .el-table {
    // height: calc(100% - 94px);
    height: calc(100% - 144px);
    // 去掉下划线
    tr {
      cursor: default;
    }
    td {
      border: none !important;
      padding: 8px 0 !important;
    }
    .el-table__body-wrapper {
      overflow: auto !important;
    }
  }
}
</style>
